<!--
  Main sidebar seen on the left. may be static or collapsing depending on selected state.

    * Collapsing - navigation automatically collapse when mouse leaves it and expand when enters.
    * Static - stays always open.
-->
<nav id="sidebar" class="sidebar" role="navigation">
    <!-- need this .js class to initiate slimscroll -->
    <div class="js-sidebar-content">
        <header class="logo d-none d-md-block">
            <a href="https://demo.flatlogic.com/sing-app/"><span>sing</span> app</a>
        </header>
        <!-- seems like lots of recent admin template have this feature of user info in the sidebar.
             looks good, so adding it and enhancing with notifications -->
        <div class="sidebar-status d-md-none">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="thumb-sm avatar float-right">
                    <img class="rounded-circle" src="demo/img/people/a5.jpg" alt="...">
                </span>
                <!-- .circle is a pretty cool way to add a bit of beauty to raw data.
                     should be used with bg-* and text-* classes for colors -->
                <span class="circle bg-success fw-bold">
                    13
                </span>
                &nbsp;
                Philip <strong>Smith</strong>
            </a>
            <!-- #notifications-dropdown-menu goes here when screen collapsed to xs or sm -->
        </div>
        <!-- main notification links are placed inside of .sidebar-nav -->
        <ul class="sidebar-nav">
            <li class="{{#activeClass active "dashboard"}} active {{/activeClass}}">
                <!-- an example of nested submenu. basic bootstrap collapse component -->
                <a href="index.html">
                    <span class="icon">
                        <i class="fi flaticon-home"></i>
                    </span>
                    Dashboard
                </a>
            </li>
        </ul>
        <!-- every .sidebar-nav may have a title -->
        <h5 class="sidebar-nav-title">Template</h5>
        <ul class="sidebar-nav">
            <li class="{{#activeClass active "typography"}} active {{/activeClass}}">
                <!-- an example of nested submenu. basic bootstrap collapse component -->
                <a href="typography.html">
                    <span class="icon">
                        <i class="fi flaticon-controls"></i>
                    </span>
                    Typography
                </a>
            </li>
            <li class="{{#activeClass active "tables"}} active {{/activeClass}}">
                <!-- an example of nested submenu. basic bootstrap collapse component -->
                <a href="tables.html">
                    <span class="icon">
                        <i class="fi flaticon-equal-1"></i>
                    </span>
                    Tables
                </a>
            </li>
            <li class="{{#activeClass active "notifications"}} active {{/activeClass}}">
                <!-- an example of nested submenu. basic bootstrap collapse component -->
                <a href="notifications.html">
                    <span class="icon">
                        <i class="fi flaticon-alarm"></i>
                    </span>
                    Notifications
                </a>
            </li>
            <li class="{{#activeClass active "icons charts maps_google"}} active {{/activeClass}}">
                <a class="collapsed" href="#sidebar-ui" data-toggle="collapse" data-parent="#sidebar">
                    <span class="icon">
                        <i class="fi flaticon-layers"></i>
                    </span>
                    UI Elements
                    <i class="toggle fa fa-angle-down"></i>
                </a>
                <ul id="sidebar-ui"
                    class="collapse {{#activeClass active "icons charts maps_google"}} show {{/activeClass}}">
                    <li class="{{#activeClass active "icons"}} active {{/activeClass}}"><a href="icons.html">Icons</a>
                    </li>
                    <li class="{{#activeClass active "charts"}} active {{/activeClass}}"><a
                            href="charts.html">Charts</a></li>
                    <li class="{{#activeClass active "maps_google"}} active {{/activeClass}}"><a
                            href="maps_google.html">Google Maps</a></li>
                </ul>
            </li>
        </ul>
        <h5 class="sidebar-nav-title">Labels <a class="action-link" href="#"><i
                    class="glyphicon glyphicon-plus"></i></a></h5>
        <!-- some styled links in sidebar. ready to use as links to email folders, projects, groups, etc -->
        <ul class="sidebar-labels">
            <li>
                <a href="#">
                    <!-- yep, .circle again -->
                    <i class="fa fa-circle text-danger mr-xs"></i>
                    <span class="label-name">My Recent</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-circle text-primary mr-xs"></i>
                    <span class="label-name">Starred</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-circle mr-xs"></i>
                    <span class="label-name">Background</span>
                </a>
            </li>
        </ul>
        <h5 class="sidebar-nav-title">Projects</h5>
        <!-- A place for sidebar notifications & alerts -->
        <div class="sidebar-alerts">
            <div class="alert">
                <a href="#" class="close" data-dismiss="alert" aria-hidden="true">&times;</a>
                <span class="fw-normal">Sales Report</span> <br>
                <div class="progress progress-xs mt-2">
                    <div class="progress-bar bg-danger" role="progressbar" style="width: 16%" aria-valuenow="16"
                        aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <small>Calculating x-axis bias... 65%</small>
            </div>
            <div class="alert">
                <a href="#" class="close" data-dismiss="alert" aria-hidden="true">&times;</a>
                <span class="fw-normal">Personal Responsibility</span> <br>
                <div class="progress progress-xs mt-2">
                    <div class="progress-bar bg-primary" role="progressbar" style="width: 23%" aria-valuenow="23"
                        aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <small>Provide required notes</small>
            </div>
        </div>
    </div>
</nav>